<template>
<!-- 容器 -->
  <el-card class="box-card">
    <!-- 卡片头部 -->
    <div slot="header" class="clearfix">
      <!-- form表单 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="手机号">
          <el-input v-model="formInline.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <!-- 日期选择器 -->
        <el-form-item>
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </el-form-item>
        <!-- 查询重置按钮,添加点击事件 -->
        <el-form-item>
          <el-button type="primary" @click="queryUser">查询</el-button>
          <el-button @click="resetUser">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 - 用户展示 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="用户ID"/>
      <el-table-column
        label="头像">
        <template slot-scope="scope">
          <!-- 头像使用数据并设置默认值 -->
          <el-avatar size="medium" :src="scope.row.portrait || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="用户名"/>
      <el-table-column
        prop="phone"
        label="手机号"/>
      <el-table-column
        label="注册时间">
        <template slot-scope="scope">
          <!-- 注册时间使用过滤器过滤格式 -->
          <span>{{scope.row.createTime | time}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态">
      </el-table-column>
      <el-table-column
        label="分配角色">
        <template slot-scope="scope">
          <!-- 分配角色按钮 -->
          <el-button type="text" @click="assignroles(scope.row.id)">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <el-dialog
      title="分配角色"
      :visible.sync="dialogVisible"
      width="50%">
      <!-- 选择器,绑定数据，multiple开启多选 -->
      <el-select v-model="roltList" multiple placeholder="选择要分配的角色">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <!-- 取消和确定按钮 -->
      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮事件函数直接写在行内 -->
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="PerformAssignmentRoles">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
// 引入 - 分页查询用户信息、获取用户全部可分配角色、给用户分配角色、查询用户角色
import { getUserPages, getAllRole, allocateUserRoles, getUserRole } from '@/services/user'
export default {
  // 组件命名
  name: 'userCard',
  data () {
    return {
      // 接口查询用户信息数据
      formInline: {
        phone: null
      },
      // 日期选择器数据
      time: '',
      // 用户列表数据
      tableData: [],
      // 信号值 - 控制对话框显示隐藏
      dialogVisible: false,
      // 选择器选项数据
      options: [],
      // 选择器选择结果
      roltList: [],
      // 信号值 - 标记当前用户id
      userId: ''
    }
  },
  // 钩子函数
  created () {
    // 初始化获取用户数据
    this.getUser(this.formInline)
  },
  methods: {
    // 分配角色确定按钮点击事件
    async PerformAssignmentRoles () {
      // 调用接口为用户设置角色
      const { data } = await allocateUserRoles({
        userId: this.userId,
        roleIdList: this.roltList
      })
      if (data.code === '000000') {
        // 如果设置成功，弹出提示，并关闭对话框
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.dialogVisible = false
      }
    },
    // 分配角色按钮事件函数
    async assignroles (id) {
      // 修改当前用户id
      this.userId = id
      // 显示对话框
      this.dialogVisible = true
      // 获取全部可分配角色列表
      const { data } = await getAllRole()
      if (data.code === '000000') {
        // 将所有角色交给选择器
        this.options = data.data
      }
      // 获取当前用户角色
      const { data: data2 } = await getUserRole(id)
      if (data2.code === '000000') {
        // 如果获取成功，遍历全部角色，将角色id传给下拉菜单
        data2.data.forEach(item => {
          this.roltList.push(item.id)
        })
      }
    },
    // 重置按钮事件函数
    resetUser () {
      // 重置数据
      this.time = []
      this.formInline.phone = null
    },
    // 查询按钮事件函数
    queryUser () {
      // 根据是否选择日期传递不同的参数
      if (this.time && this.time.length === 2) {
        this.getUser({
          phone: this.formInline.phone,
          startCreateTime: this.time[0],
          endCreateTime: this.time[1]
        })
      } else {
        this.getUser(this.formInline)
      }
    },
    // 获取用户数据
    async getUser (obj) {
      // 获取数据
      const { data } = await getUserPages(obj)
      if (data.code === '000000') {
        // 如果获取成功，将数据交给列表
        this.tableData = data.data.records
      }
    }
  },
  // 过滤器
  filters: {
    // 时间过滤器，用于过滤表格中的用户注册时间
    time (data) {
      // 直接截取前10位字符串
      return data.slice(0, 10)
    }
  },
  watch: {
    dialogVisible (newvalue) {
      if (!newvalue) {
        this.roltList = []
      }
    }
  }
}
</script>
